<template>
	<view class="j-balance">
		<view class="j-b-card">
			<view class="j-b-card-title">充值金额</view>
			<view class="j-b-card-input">
				<text class="j-b-card-i-tag">￥</text>
				<input v-model="params.amount" class="j-b-card-i-i" focus type="number" placeholder="" clearable />
			</view>
			<view class="j-b-card-remarks"><u-input v-model="params.orderTitle" type="text" maxlength="50" clearable placeholder="备注(50字)" /></view>
		</view>
		<view class="j-b-btn"><u-button class="j-b-b" shape="circle" hover-class="none" @click="postTopUp">充值</u-button></view>
		
		<!-- 平台虚拟户 -->
		<view class="j-b-platform" @click="toVirtualHoursehold">智创虚拟币账户</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				amount: '',
				orderTitle: ''
			}
		};
	},
	onNavigationBarButtonTap() {
		this.$u.api
			.postIsLogin()
			.then(res => {
				console.log(res);
				// 跳转到充值记录页面
				uni.navigateTo({
					url:'recharge-record'
				})
			})
			.catch(err => {
				console.log(err);
				// if (err.status == 401) {
				// 	// 跳转登录页面
				// 	uni.navigateTo({
				// 		url:'../../../login'
				// 	})
				// 	return false;
				// }
			});
	},
	methods: {
		// 跳转平台虚拟币账户页面
		toVirtualHoursehold(){
			uni.navigateTo({
				url:'./virtualHousehold'
			})
		},
		// 用户充值
		postTopUp() {
			// 判断金额是否为空
			if (this.$u.test.isEmpty(this.params.amount)) {
				this.$refs.uToast.show({
					title: '请输入充值金额'
				});
				return false;
			}

			// 判断金额格式是否正确
			if (!this.$u.test.amount(this.params.amount)) {
				this.$refs.uToast.show({
					title: '金额格式不正确'
				});
				return false;
			}

			this.$u.api
				.postTopUp(this.params)
				.then(res => {
					console.log(res);
					uni.navigateTo({
						url: './submit-examine?type=1&price=' + this.params.amount
					});
				})
				.catch(err => {
					console.log(err);
					// if (err.status == 401) {
					// 	uni.navigateTo({
					// 		url: '../../../login'
					// 	});
					// }
				});
		}
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-balance {
	padding: 25rpx;
	
	.j-b-platform{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 25rpx;
		color: #4F4F4F;
	}

	.j-b-card {
		padding: 40rpx 25rpx 0 25rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 14rpx;

		.j-b-card-title {
			color: #a3a3a3;
		}

		.j-b-card-input {
			position: relative;
			display: flex;
			align-items: center;

			.j-b-card-i-tag {
				font-size: 50rpx;
				font-weight: bold;
				position: absolute;
				left: 0;
				top: 28rpx;
			}

			.j-b-card-i-i {
				padding-left: 66rpx;
				padding-top: 18rpx;
				padding-bottom: 10px;
				font-size: 70rpx;
				// font-weight: bold;
				border-bottom: 1rpx solid #f1f1f1;
			}
		}
		.j-b-card-remarks {
			padding: 10rpx 0;
		}
	}

	.j-b-btn {
		margin-top: 50rpx;

		.j-b-b {
			color: #000000;
			background: linear-gradient(90deg, rgba(248, 195, 5, 1), rgba(254, 166, 2, 1));

			&:after {
				border: 0;
			}
		}

		.j-b-btn-d {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #a3a3a3;
			margin-top: 20rpx;

			.j-b-btn-d-all {
				color: #e21616;
			}
		}
	}
}
</style>
